import React from "react";
import { LeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { Button, Input, message, Result, Space, Tag } from "antd";

const { Search } = Input;

const Searchs = () => {
  const Navigate = useNavigate();
  const tags = Array.from({ length: 15 }, (_, index) => `Tag ${index + 1}`);
  const tagss = Array.from({ length: 15 }, (_, index) => `标签${index + 1}`);

  let screenWidth = document.documentElement.clientWidth;

  // 判断是否为移动端

  return screenWidth >= 768 ? (
    <Result
      title="很抱歉电脑端无法打开此页面"
      extra={
        <Button
          type="primary"
          key="console"
          onClick={() => {
            message.success("回到首页成功");
            Navigate("/");
          }}
        >
          回到首页
        </Button>
      }
    />
  ) : (
    <div>
      <header
        className={"grid grid-cols-2 bg-gray-200 pl-2 pr-2 pt-2 pb-2 rounded"}
      >
        <div
          className={"flex cursor-pointer text-gray-500"}
          onClick={() => {
            message.success("返回上一界面成功");
            Navigate(-1);
          }}
        >
          <LeftOutlined />
          <p>返回</p>
        </div>
        <p className={"text-gray-1000 font-bold"}>搜索</p>
      </header>
      <div className={"mt-4 bg-gray-200 p-2 shadow"}>
        <Search placeholder="请搜索您需要的房间号" enterButton="搜索" />
        <br />
        <div className={"mt-5 flex justify-between items-center"}>
          <h2 className={"text-base font-bold"}>搜索历史</h2>
          <p
            className={"text-gray-400 text-base"}
            onClick={() => {
              message.success("清空历史记录成功");
            }}
          >
            清空历史记录
          </p>
        </div>
        <div>
          <Space wrap className={"mt-2"}>
            {tags.map((tag, index) => (
              <Tag key={index} closable>
                {tag}
              </Tag>
            ))}
          </Space>
        </div>
        <div className={"mt-5 flex justify-between items-center"}>
          <h2 className={"text-base font-bold"}>热门搜索</h2>
        </div>
        <div>
          <Space wrap className={"mt-2"}>
            {tagss.map((tag, index) => (
              <Tag
                key={index}
                onClick={() => {
                  message.success("搜索成功");
                }}
              >
                {tag}
              </Tag>
            ))}
          </Space>
        </div>
      </div>
    </div>
  );
};

export default Searchs;
